<template>
  <view class="waterUsed">
    <nav-bar title="用水计量" leftArrow></nav-bar>
    <van-search v-model="sensorName" @search="onSearch" placeholder="请输入测点" />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="universal-list-list"
      >
        <van-cell v-for="item in list" :key="item">
          <view class="universal-list-item">
            <view class="universal-list-head">
              <view class="universal-list-title">{{ item.sensorName }}</view>
            </view>
            <view class="universal-list-main">
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">瞬时流量：</view>
                <van-text-ellipsis class="universal-list-detail-cont" :content="`${item.currentFlow || '0'}m³/s`" />
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">日用水量：</view>
                <van-text-ellipsis class="universal-list-detail-cont" :content="`${item.todayFlow}m³`" />
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">月用水量：</view>
                <van-text-ellipsis class="universal-list-detail-cont" :content="`${item.monthFlow}万/m³`" />
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">年用水量：</view>
                <van-text-ellipsis class="universal-list-detail-cont" :content="`${item.yearFlow}万/m³`" />
              </view>
            </view>
          </view>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { apiWaterUsedList } from '@/api/waterNeed';
  import { exWaterUsed } from '@/local/home';

  let allList = ref([]);
  let list = ref([]);
  let sensorName = ref('');
  const refreshing = ref(false);
  const loading = ref(false);
  const finished = ref(false);

  const getWaterUsedList = () => {
    const year = new Date().getFullYear();
    apiWaterUsedList({
      year: year,
      realFlowFlag: true
    }).then(res => {
      finished.value = true;
      allList.value = res;
      list.value = res;
    })
  }
  const onLoad = () => { 
    getWaterUsedList();
  };
  const onRefresh = () => { 
    refreshing.value = false;
    onLoad();
  };
  const onSearch = (val) => {
    list.value = allList.value.filter(e => {
      if (e.sensorName.match(val)) {
        return e
      }
    })
  };

</script>

<style lang="scss" scoped>
@import "@/assets/universal-list.scss";
</style>